import { Button, Drawer, View } from 'native-base';
import React, { BaseSyntheticEvent, Component } from 'react';
import {
	ScrollView, StyleSheet, Text, TouchableOpacity
} from 'react-native';


export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((ev: BaseSyntheticEvent<T>) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | unknown[]) {

	class SideBar extends Component {
		public render() {
			return (
				<View style={styles.container}>
					<Text style={styles.controlText}>Control Panel</Text>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
					<Button success><Text onPress={a('a003')}> Close Drawer </Text></Button>
				</View>
			);
		}
	}

	return (
		<View>
			<Button>
				<Text onPress={a('a002')}> 打开菜单 </Text>
			</Button>
			<Button>
				<Text onPress={a('a003')}> 关闭菜单 </Text>
			</Button>
			<Drawer
				ref={a('a001')}
				content={<SideBar />}
				onClose={a('a004')}>
			</Drawer>
		</View >
	);


}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 20,
		backgroundColor: 'black'
	},
	controlText: {
		color: 'white'
	}
});
